<template>
    <van-sticky>
        <van-nav-bar
            title="拼团"
            left-text="返回"
            left-arrow
            @click-left="onBack"
            v-if="proid"
        > 
        </van-nav-bar>

        <van-nav-bar
            title="拼团"
            v-else
        > 
        </van-nav-bar>

        <van-search v-model="keyword" @search="onSearch" placeholder="请输入搜索关键词" />
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-card
                v-for="item in list"
                :key="item.id"
                :title="item.products.name"
            >
                <template #thumb>
                    <router-link :to="{path:'/product/product/info',query:{proid:item.products.id}}">
                        <van-image
                            width="88"
                            height="88"
                            fit="cover"
                            :src="item.products.thumb_cdn"
                        />
                    </router-link>
                </template>
                <template #desc>
                    <div class="total">拼团人数：{{ item.total }}人</div>
                </template>

                <template #price>
                    <div class="price">拼团价格：￥{{ item.products.team }}</div>
                </template>

                <template #tags>
                    <div class="time">
                        拼团时间：{{ item.createtime_text }}（开始）- {{ item.endtime_text }}（结束）
                    </div>
                </template>

                <template #footer>
                    <van-button size="small" type="danger" @click="ToJoin(item.id,item.products.id)">参与拼团</van-button>
                    <van-button size="small" type="warning" @click="ToTeamInfo(item.id)">查看详情</van-button>
                </template>
            </van-card>

        </van-list>
    </van-pull-refresh>

    <div style="height: 50px;"></div>

    <Footer />
</template>

<script setup>
import Footer from '@/components/common/Footer.vue';
const { proxy } = getCurrentInstance();

const proid = ref(proxy.$route.query.proid ?? 0);
const refreshing = ref(false);// 是否下拉刷新
const finished = ref(false);// 上拉加载完成
const loading = ref(false);// 是否处于加载状态
const list = ref([]);
const listCount = ref(0);
const page = ref(1);
const keyword = ref('');

const onSearch = () => {
    onRefresh()
}

const onRefresh = () => {
    list.value = [];
    page.value = 1;
    finished.value = false;
    loading.value = true;

    setTimeout(onLoad,1500);
}

const onLoad = async () => {
    if(refreshing.value)
    {
        refreshing.value = false;
    }

    let params = {
        proid:proid.value,
        page:page.value,
        keyword:keyword.value
    }

    let result = await proxy.$post({
        url:'/product/team/index',
        params
    })

    if(result.code === 1)
    {
        list.value = list.value.concat(result.data.list);
        listCount.value = result.data.count;

        finished.value = false;
        loading.value = false;

        if(list.value.length === listCount.value)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else{
        finished.value = true;

        proxy.$warnNotify(result.msg);

        return false;
    }
}

const ToTeamInfo = (teamid) => {
    proxy.$router.push({path:'/product/team/info',query:{teamid}});
}

// 参与拼团 => 商品详情 => 选择商品规格
const ToJoin = (teamid,proid) => {
    proxy.$cookies.set('teamid',teamid);

    proxy.$router.push({path:'/product/product/info',query:{proid}})
}


const onBack = () => proxy.$router.back();
</script>